<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-table-grid-down {
            display: none;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">专业施工队管理</a>
            <a>
                <cite>专业施工队列表</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
       onclick="window.history.go(-1)" title="后退">
        <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">工种</label>
                                <div class="layui-input-block">
                                    <select name="" id="profession"></select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索</label>
                                <div class="layui-input-block">
                                    <input type="search" autocomplete="off" class="layui-input" id='searchInput'>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type='text/html' id='toolbar'>
    <button class="layui-btn batchAddition" type='button' auth="addTechnicalGroup">添加</button>
</script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        $('#profession').html(professionSelect());
        form.render();
        var labourCompanyId = Number(getQueryString('companyId'));
        var professionId = Number($('#profession option:selected').val());
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/hrm/technical/groupLists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count
                };
            },
            where: {
                companyId: labourCompanyId,
                professionId: professionId,
                search: "",
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '8%'},
                    {field: 'chargePerson', title: '负责人'},
                    {field: 'phone', title: '电话'},
                    {field: 'professionName', title: '工种'},
                    {field: 'idcard', title: '身份证号'},
                    {field: 'jobNumber', title: '工号'},
                    {field: 'groupName', title: '班组名称'},
                    {
                        field: '', title: '操作', width: '20%', templet(d) {
                            return `
                            <button class='bianji layui-btn' lay-event='bianji' auth="editTechnicalGroup">编辑</button>
                            <button class='remove layui-btn layui-btn-danger' lay-event='remove' auth="delTechnicalGroup">删除</button>
                            <button class='project layui-btn' lay-event='project' auth="adjustTechnicalGroup">设置关联</button>
                        `
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function () {
                permission();
            }
        });
        table.on('tool(test)', function (data) {
            if (data.event == 'bianji') {
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%', '60%'],
                    content: `
                        <form class="layui-form layerOpen" action="">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">负责人</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="chargePerson" value='${data.data.chargePerson}' autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="phone" value='${data.data.phone}' autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">工种</label>
                                    <div class="layui-input-block">
                                        <select id='gongzhong'>
                                            <option value="null">请选择工种</option>
                                            ${professionSelect()}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">身份证号</label>
                                    <div class="layui-input-block">
                                        <input type='number' id='idcard' class='layui-input' value=${data.data.idcard} min=0>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        for (var i = 0; i < $('#gongzhong option').length; i++) {
                            if (data.data.professionId == $('#gongzhong option').eq(i).val()) {
                                $('#gongzhong option').eq(i).prop('selected', 'selected');
                                form.render();
                            }
                        }
                        form.render();
                    },
                    yes: function () {
                        $.ajax({
                            url: url + "/hrm/technical/editGroup",
                            type: "POST",
                            async: false,
                            data: {
                                id: data.data.id,
                                phone: $('#phone').val(),
                                chargePerson: $('#chargePerson').val(),
                                idcard: $('#idcard').val(),
                                professionId: Number($('#gongzhong option:selected').val()),
                                order: 1,
                                token: getToken
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('添加', r);
                                    setTimeout(function () {
                                        table.reload('lists');
                                        layer.closeAll();
                                    }, 1000)
                                } else {
                                    tips('添加', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event == 'remove') {
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%', '30%'],
                    content: `
                        <form class="layui-form layerOpen" action="">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">确定删除吗？</label>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function () {
                        $.ajax({
                            url: url + "/hrm/technical/deleteGroup",
                            type: "POST",
                            data: {
                                id: data.data.id,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('删除', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('删除', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event == 'project') {
                layer.open({
                    type: 1,
                    title: "设置关联",
                    area: ['40%', '40%'],
                    content: `
                        <form class="layui-form layerOpen contact" action="">
                            <div class='layui-item'>
                                <div class='layui-inline'>
                                    <label class='layui-form-label'>查询姓名</label>
                                    <div class='layui-input-block'>
                                        <input type='text' placeholder='请输入姓名或工号' name='search' autocomplete="off" class='layui-input'>
                                        <ul class='layerOpen_ul_list' style="width:100%"></ul>
                                    </div>
                                </div>
                            </div>
                            <div class='layui-item'>
                                <div class='layui-inline'>
                                    <label class='layui-form-label'>查询班组</label>
                                    <div class='layui-input-block'>
                                        <select name="groupId" id="">${groupSelect('', data.data.professionId)}</select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        form.render();
                    },
                    yes: function () {
                        let employeeId = $('form.contact input[name=search]').data('id');
                        let groupId = $('form.contact select[name=groupId]').val();
                        if (employeeId=='' && groupId == ''){
                            layer.msg('未选择关联任何工人或班组')
                        }
                        $.ajax({
                            url: url + "/hrm/technical/adjustProject",
                            type: "POST",
                            async: false,
                            data: {
                                id: data.data.id,
                                employeeId: employeeId,
                                groupId: groupId,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('项目调入', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('项目调入', r);
                                }
                            }
                        })
                    }
                })
            }
        })
        //搜索
        $('body').on('click', '#search', function () {
            var professionId = Number($('#profession option:selected').val());
            var search = $(this).parent().prev().find('input').val();
            table.reload('lists', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    search: search,
                    professionId: professionId
                }
            })
        })
        $('body').on('click', '.batchAddition', function () {
            layer.open({
                type: 1,
                title: "添加专业施工队",
                area: ['40%', '60%'],
                content: `
                    <form class="layui-form layerOpen" action="">
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">负责人</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="chargePerson" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="phone" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">工种</label>
                                <div class="layui-input-block">
                                    <select id='gongzhong'>
                                        ${professionSelect()}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">身份证号</label>
                                <div class="layui-input-block">
                                    <input type='number' min=0 id='idcard' class='layui-input'>
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                success: function () {
                    form.render();
                },
                yes: function (index, layero) {
                    $.ajax({
                        url: url + "/hrm/technical/addGroup",
                        type: "POST",
                        data: {
                            companyId: labourCompanyId,
                            phone: $('#phone').val(),
                            chargePerson: $('#chargePerson').val(),
                            idcard: $('#idcard').val(),
                            professionId: Number($('#gongzhong option:selected').val()),
                            token: getToken(),
                            order: 1,
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('添加', r);
                                setTimeout(function () {
                                    table.reload('lists');
                                    layer.closeAll();
                                }, 2000)
                            } else {
                                tips('添加', r);
                            }
                        }
                    })
                }
            })
        })

        $('body').on('input propertychange', 'form.contact input[name=search]', function () {
            var val = $(this).val();
            var this_ind = $(this);
            var this_next = $(this).next();
            $.ajax({
                type: "post",
                url: url + '/hrm/employee/search',
                beforeSend: function () {
                    $('form.contact input[name=search]').attr('data-id', '');
                },
                data: {
                    projectId: Number(getParam('projectId')),
                    search: val,
                    token: getParam('token')
                },
                success: function (r) {
                    this_next.show();
                    if (r.data == "" || r.data == null) {
                        this_next.html('未查找到此人');
                    } else {
                        var li = '';
                        for (var i = 0; i < r.data.length; i++) {
                            li += `<li data-id=${r.data[i].id}>${r.data[i].name}</li>`
                        }
                        this_next.html(li);
                        $('ul li').click(function () {
                            this_ind.val($(this).html());
                            this_ind.attr('data-id', $(this).data('id'));
                            $('ul').hide();
                        })
                    }
                }
            })
        })
    });

    function groupSelect(projectId = '',professionId = ''){
        var option = '<option value="">-</option>';
        $.ajax({
            url:url+'/hrm/group/selectLists',
            type: "POST",
            async: false,
            data: {
                projectId:projectId,
                professionId:professionId=== ''?'':Number(professionId),
                token:getToken()
            },
            success:function(r){
                if(r.code==100000){
                    for(var i = 0; i < r.data.length; i++) {
                        option += `
                        <option value=${r.data[i].id} data-projectid="${r.data[i].projectId}">${r.data[i].name}</option>
                    `
                    }
                }else{
                    tips('班组下拉列表',r);
                }
            }
        });
        return option;
    }

</script>

</html>